<template>
    <transition name="confirm-fade">
        <div class="confirm" v-show="showFlag" @click.stop>
            <div class="confirm-wrapper">
                <div class="confirm-content">
                    <p class="text">{{text}}</p>
                    <div class="operate">
                        <div @click="cancle" class="operate-btn left">{{cancelBtnText}}</div>
                        <div @click="confirm" class="operate-btn">{{confirmBtnText}}</div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
    export default{
        props:{
            text:{
                type:String,default:'确定要删除吗'
            },
            cancelBtnText:{
                type:String,default:'取消'
            },
            confirmBtnText:{
                type:String,default:'确定'
            }
        },
        data(){
            return{
                showFlag:false
            }
        },
        methods:{
            show(){
                this.showFlag=true
            },
            cancle(){
                this.showFlag=false
            },
            confirm(){
                this.showFlag=false
                this.$emit('confirm')
            }
        }
    }
</script>
<style lang="stylus">
@import '~common/stylus/variable'
    .confirm
        position fixed
        left 0px
        right 0px
        top 0px
        bottom 0px
        z-index 2
        background $color-background-d
        &.confirm-fade-enter-active
            animation confirm-fadein 0.3s
            .confirm-content
                animation confirm-zoom 0.3s
        .confirm-wrapper
            position absolute
            top 50%
            left 50%
            transform translate(-50%,-50%)
            z-index 3
            .confirm-content
                width 270px
                border-radius 13px
                background $color-highlight-background
                .text
                    padding 19px 15px
                    line-height 22px
                    text-align center
                    font-size $font-size-large
                    color $color-text-l
                .operate
                    display flex
                    align-items center
                    text-align center
                    font-size $font-size-large
                    .operate-btn
                        flex 1
                        line-height 22px
                        padding 10px 0
                        border-top 1px solid $color-background-d
                        color $color-text-d
                        &.left
                            border-right 1px solid $color-background-d
    @keyframes confirm-fadein
        0%
            opacity 0
        100%
            opacity 1
    @keyframes confirm-zoom
        0%
            transform scale(0)
        50%
            transform scale(1.1)
        100%
            transform scale(1)
</style>